import { createStyles } from "antd-style";
import { useBreakpoint } from 'antd'; // 引入useBreakpoint来检测屏幕尺寸

const useStyle = createStyles(({ token, css }) => {
  const { xs, sm, md, lg, xl } = useBreakpoint(); // 获取屏幕尺寸信息

  return {
    layout: css`
      width: 100%;
      min-width: ${xs ? '100%' : '1000px'};
      height: 100vh;
      border-radius: ${token.borderRadius}px;
      display: flex;
      background: ${token.colorBgContainer};
      font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif;

      /* Hide scrollbar but keep functionality */
      overflow-y: auto;
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
      }
      
      .ant-prompts {
        color: ${token.colorText};
      }
    `,
    menu: css`
      background: ${token.colorBgLayout}80;
      width: ${xs ? '50px' : '240px'};
      height: 100%;
      min-height: 300px;
      max-height: 100vh;
      display: flex;
      flex-direction: column;
    `,
    conversations: css`
      padding: 0 12px;
      flex: 1;
      scrollbar-width: thin;
    `,
    chat: css`
      width: 100%;
      max-width: ${xs ? '320px' : '900px'};
      margin: 0 auto;
      padding-top: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow-y: hidden;
      flex: auto;
    `,
    messages: css`
      height: 100vh;
      flex: auto;
      padding: 0 10px;
      scroll-behavior: smooth;
      scrollbar-width: none;
      margin-top: 3px;
    `,
    placeholder: css`
      maxWidth: '600px';
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      height: 90vh;
    `,
    sender: css`
      box-shadow: ${token.boxShadow};
    `,
    logo: css`
      display: flex;
      height: 72px;
      align-items: center;
      justify-content: start;
      padding: 0 24px;
      box-sizing: border-box;

      img {
        width: 24px;
        height: 24px;
        display: inline-block;
      }

      span {
        display: inline-block;
        margin: 0 8px;
        font-weight: bold;
        color: ${token.colorText};
        font-size: ${xs ? '12px' : '16px'};
      }
    `,
    addBtn: css`
      background: #1677ff0f;
      border: 1px solid #1677ff34;
      width: calc(100% - 24px);
      margin: 0 12px 24px 12px;
    `,
  };
});

export default useStyle;
